import React, {useEffect, useState} from "react";
import {Avatar, Button, Table, Tag} from 'antd';
import userApi from "@/api/UserApi";
import {UserOutlined} from "@ant-design/icons";
import UpdateUserModal from "@/pages/ContextPage/AdminPage/AdminUserPage/UpdateUserModal";
import {IPage, IUserInfoDto} from "@/api/Types/ObjInterfaces.ts";


const AdminUserPage: React.FC = () => {
    // @ts-ignore
    const [tableData, setTableData] = useState<IPage<IUserInfoDto>>()
    const [showUpdateUserModal, setShowUpdateUserModal] = useState(false)
    const [targetUserData, setTargetUserData] = useState<IUserInfoDto>(null)
    useEffect(() => {
        userApi.pageUser(1, 10).then(data => {
            setTableData(data)
            setTargetUserData(data.records[0]) // 设置一个默认值
        })
    }, []);

    if (tableData == null || tableData.records == null) {
        return <Table />
    }

    return (
        <>
            <Table dataSource={tableData.records}
                   rowKey="id"
                   pagination={{
                       current: tableData.current,
                       pageSize: tableData.size,
                       total: tableData.total,
                       onChange: (page, pageSize) => {
                           userApi.pageUser(page, pageSize).then(data => {
                               setTableData(data)
                           })
                       }
                   }}
            >
                <Table.Column title="id"
                              dataIndex="id"
                              key='id'
                />
                <Table.Column title="昵称"
                              dataIndex="nickName"
                              key="nickName"
                />
                <Table.Column title="用户名"
                              dataIndex="username"
                              key="username"
                />
                <Table.Column title="头像"
                              dataIndex="avatar"
                              key="avatar"
                              render={(avatar: string) => {
                                  if (avatar == null) {
                                      return <Avatar src={<UserOutlined/>}/>
                                  }
                                  return <Avatar src={'api/img/' + avatar}/>
                              }}
                />
                <Table.Column title="权限等级"
                              dataIndex="level"
                              key="level"
                              render={(level: string) => {
                                  let color = 'green'
                                  switch (level) {
                                      case 'User': {
                                          color = 'green'
                                          break
                                      }
                                      case 'Admin': {
                                          color = 'blue'
                                          break
                                      }
                                  }
                                  return (
                                      <Tag color={color}>
                                          {level}
                                      </Tag>
                                  )
                              }}
                />
                <Table.Column title="操作"
                              dataIndex="id"
                              key='id'
                              render={(value, record: IUserInfoDto, index) => {
                                  return <Button
                                      onClick={() => {
                                          setShowUpdateUserModal(true)
                                          setTargetUserData(record)
                                      }}
                                      type='text'
                                  >操作</Button>
                              }}
                />
            </Table>
            <UpdateUserModal open={showUpdateUserModal}
                             setOpen={setShowUpdateUserModal}
                             data={targetUserData}
                             setData={setTargetUserData}
            />
        </>
    )
}
export default AdminUserPage